<style type="text/css">
.mv_warp{
	width:100%;
	background:#333;
	padding-top:10px;
	margin-top:10px;
	padding-bottom:10px;
}
.main_cnt{
	
	width:1200px;
	margin:auto;
	display:flex;
	flex-flow: row;
}
.play_warp{
	flex: 7;
	padding-right:10px;
}
.chat_warp{
	flex: 3;
}
.left_top{
	background:#fff;
	border-radius:5px;
	margin-bottom:10px;
	padding-top:10px;
	padding-left:15px;
}
.left_top .ctitle{
	font-size:17px;
	font-weight:bold;
}
.left_top .cmore{
	position:relative;
	height:80px;
}
.left_top .cmore .user_icon{
	position:absolute;
	width:60px;
	height:60px;
	border-radius:100%;
	object-fit: cover;
	left:0;
	top:10px;
}
.left_top .cmore .user_info{
	font-size:15px;
	position:absolute;
	left:80px;
	top:15px;
}
.left_top .cmore .user_info .time{
	margin-left:18px;
}
.left_top .cmore .guanzhu{
	position: absolute;
    top: 10px;
    cursor: pointer;
    right: 20px;
    width: 166px;
    height: 34px;
    border-radius: 17px;
    background-image: -moz-linear-gradient( 0deg, rgb(255,151,58) 0%, rgb(255,98,37) 100%);
    background-image: -webkit-linear-gradient( 0deg,rgb(255,151,58) 0%, rgb(255,98,37) 100%);
    background-image: -ms-linear-gradient( 0deg, rgb(255,151,58) 0%, rgb(255,98,37) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #ff963a, endColorstr = #ff6325);
    color: #fff;
    text-align: center;
    font-size: 14px;
    padding: 5px 0 5px 20px;
    box-sizing: border-box;
}
.left_top .cmore .guanzhu em {
    display: inline-block;
    width: 28px;
    height: 28px;
    background: url(/public/static/images/ic_fol.png) no-repeat;
    background-size: contain;
    position: absolute;
    top: 3px;
    left: 3px;
}
.left_top .cmore .guanzhu span.num {
    margin-left: 36px;
    position: relative;
}
.left_top .cmore .guanzhu span.num:before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 10px;
    background: #ffc89f;
    position: absolute;
    left: -19px;
    top: 5px;
}
.left_top .cmore .zb_info{
	position:absolute;
	left:80px;
	bottom:12px;
	font-size:15px;
	background:green;
	color:#fff;
	padding:2px 10px;
	border-radius:3px;
}
.left_top .cmore .fav_list{
	position:absolute;
	left:400px;
	bottom:12px;
}
.left_top .cmore .fav_list>div{
	float:left;
}
.left_top .cmore .fav_list>div:first-child{
	padding-top:3px;
	padding-right:10px;
}
.left_top .cmore .fav_list .fav_user{
	height:15px;
	overflow:hidden;
}
.mv_player{
	background:#eee;
	min-height:450px;
}
</style>
<div class="mv_warp">
	<ul class="main_cnt">
		<li class="play_warp">
			<div class="left_top">
				<div class="ctitle"><a href="{:urls('qun/content/show',['id'=>$info.ext_id])}" target="_blank">{$info.title}</a></div>
				<div class="cmore">
					<a href="{:get_url('user',$info.uid)}" target="_blank"><img class="user_icon" src="{:get_user_icon($info.uid)}"></a>
					<div class="user_info">作者：<a href="{:get_url('user',$info.uid)}" target="_blank">{:get_user_name($info.uid)}</a> <i class="time si si-speedometer"></i> 发布日期 {$info.create_time|format_time}</div>
					<div class="zb_info">
						<i class="time si si-speedometer"></i> 直播开始时间 {:format_time($info.start_time?:$info.create_time)}
					</div>
					<div class="fav_list">
						<div class="fa fa-bullhorn"> 已预约用户</div> 
						<div class="fav_user">
							<ul>
							<li>{if plugins_config('fav')}
								{volist name=":query('fav',['rows'=>20,'where'=>['aid'=>$id,'sysid'=>M('id')]])" id="us"}
								<li><a href="{:get_url('user',$us.uid)}" target="_blank">{:get_user_name($us.uid)}</a>　<i class="si si-clock"></i> {:format_time($us.create_time)}</li>
								{/volist}
								{else /}
									系统没安装收藏夹插件
								{/if}
							</ul>
						</div>			
					</div>
					<div class="guanzhu"><em></em><span class="txt">预约</span><span class="num">{if plugins_config('fav')} {:query('fav',['count'=>'id','where'=>['aid'=>$id,'sysid'=>M('id')]])} {/if}</span></div>
				</div>
			</div>
			<div class="mv_player">
				<!--群聊直播预告的播放器框架,可以放在当前页面的任何位置 关键元素name="iframe_play" class="iframe_play" id="iframe_play" -->
				{if $info.zhibo_status==2||$info.zhibo_status==1}
					<iframe name="iframe_play" class="iframe_play" id="iframe_play" src="about:blank" style="height:450px;width:100%;display:none;" scrolling="no" frameborder="0" allowfullscreen="true"></iframe>

					{if $info.zhibo_status==1}
						<script type="text/javascript">						
							$(".iframe_play").show().attr('src','__STATIC__/libs/bui/pages/menu/zhibo_prepare/index.html');
							$(".iframe_play").load(function(){
								var win = $(".iframe_play")[0].contentWindow;
								win.init({ title:"{$info.title}",start_time:"{$info.start_time|format_time}",_start_time:"{$info.start_time}",id:"{$id}" });
							});						
						</script>
					{/if}
				{else /}
					<!-- 视频播放器 -->
					<div class="vod_mv">
						{php}$mvurl=is_array($info['mv_url'])?$info['mv_url'][0]['url']:$info['mv_url'];{/php}
						{if empty($info.zhibo_status)||$info.zhibo_status==3||($mvurl&&time()-$info['start_time']>3600*5)}
							{:fun('Player@play',$mvurl,'100%',600)}
						{/if}
					</div>
				{/if}
			</div>
			<div class="left_bottom"></div>
		</li>
		<li class="chat_warp">
			{if $info.zhibo_status>0&&$info.ext_id==0}
			<script type="text/javascript">layer.alert('当前直播没有指定圈子,请圈主指定一个!');</script>
			{/if}
			<iframe name="iframe_msg" id="iframe_msg" src="{:urls('index/msg/index')}?uid={$info.ext_id?-$info.ext_id:$info.uid}&msg_sys={:M('id')}&msg_id={$id}" width="100%" style="height:100%;"  frameborder="0" allowfullscreen="true"></iframe>			
		</li>
	</ul>
</div>
<script type="text/javascript">

function fav_Scroll(obj){  
	$(obj).find("ul").animate({  
		marginTop : "-20px"  
	},1000,function(){  
		$(this).css({marginTop : "0px"}).find("li:first").appendTo(this);  
	})  
}
$(function(){   
	var scroll = setInterval('fav_Scroll(".fav_user")',2000);
    $(".fav_user").hover(function(){
		clearInterval(scroll);
	},function(){
		scroll = setInterval('fav_Scroll(".fav_user")',2000);
	});

	$(".guanzhu").click(function(){
		$.get("{:urls('cms/wxapp.live/fav')}?id={$id}&time=0",function(res){
			if(res.code==0){
				layer.msg("预约成功");
			}else{
				layer.alert(res.msg);
			}
		});
	});
});

function change_win(type){
	if(type){
		$(".main_cnt").css({width:'100%'});
	}else{
		$(".main_cnt").css({width:'1200px'});
	}
}
var vodMv='';
//var if_reset_height = false;
function open_play(url){	//打开播放器回调函数
	vodMv = $(".vod_mv").html();
	$(".vod_mv").html('');
	//if(!if_reset_height){	//重新调整高度
	//	if_reset_height = true;
	//	$(".chat_warp").html($(".chat_warp").html());
	//}
	var h = $(".play_warp").height();
	$("#iframe_msg").height(h);
	$("#iframe_msg")[0].contentWindow.set_chatwin_height();
	console.log("VOD高",h);
}
function close_play(){	//关闭播放器回调函数
	$(".vod_mv").html(vodMv);
}

$(function(){
	$("html,body").animate({scrollTop:$('.mv_warp ').offset().top},500);
});
</script>